<template>
  <div>
    <div class="title">商户管理</div>
    <div class="box">
      <div class="box-title">
        <i class="el-icon-search"></i>
        <span>&nbsp; 筛选查询</span>
      </div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="mini"
      >
        <el-form-item class="form">
          <el-input
            v-model="formInline.user"
            placeholder="输入商户名称查询"
          ></el-input>
        </el-form-item>
        <el-form-item class="form">
          <el-input
            v-model="formInline.user"
            placeholder="提供商品名称进行查询"
          ></el-input>
        </el-form-item>
        <el-form-item class="form">
          <el-date-picker
            v-model="formInline.date1"
            placeholder="到期时间进行查询"
            type="date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onCha">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReset">添加商户</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border class="tables" size="mini">
        <el-table-column prop="id" label="会员编号" width="179">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="170">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证号" width="180">
        </el-table-column>
        <el-table-column prop="data" label="提交日期" width="170">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="170">
        </el-table-column>
        <el-table-column prop="checkPerson" label="审核人" width="170">
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="180"
          fixed="right"
        >
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
      <div id="app">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
        dialogVisible:false,
      },
      form: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 表格
      tableData: [
        {
          id: "123",
          name: "hahha",
          phone: "123456789",
          identityCard: "132456461",
          data: "2021",
          state: "aa",
          checkPerson: "sdfs",
          operation: "",
        },
        {
          id: "123",
          name: "hahha",
          phone: "123456789",
          identityCard: "132456461",
          data: "2021",
          state: "aa",
          checkPerson: "sdfs",
          operation: "",
        },
        {
          id: "123",
          name: "hahha",
          phone: "123456789",
          identityCard: "132456461",
          data: "2021",
          state: "aa",
          checkPerson: "sdfs",
          operation: "",
        },
      ],
    };
  },
  methods: {
    onCha() {},
    onReset() {},
    onSubmit() {
      console.log("submit!");
    },
    onSubmitAdd(){
      this.$bus.$emit("onAddDialog",true);
    },
     deleteRow(index, rows) {
        rows.splice(index, 1);
      },
  },
};
</script>

<style scoped>
.title {
  text-align: left;
  padding-left: 220px;
  padding-top: 20px;
}
.box {
  width: 1400px;
  height: 170px;
  background: rgba(242, 242, 242, 1);
  margin: 20px;
  margin-left: 220px;
}
.box-title {
  float: left;
  margin: 30px 1000px 30px 150px;
  font-weight: 800;
}
.form {
  margin-right: 70px;
}

.tables {
  width: 1400px;
  margin-top: 80px;
}
.app {
  float: right;
  margin: 0 0 0 250px;
  vertical-align: bottom;
}
</style>